<template>
  <div>
    <h2>物流管理(◐‿◑)﻿</h2><hr>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="logisticsNumber"
        label="物流编号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="logisticsNotifier"
        label="通知人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="notifierPost"
        label="岗位"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="世纪"
        width="220">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="250">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="170">
        <template v-slot="scope">
          <el-button
              v-if="scope.row.state==3"
            size="mini"
            type="success" disabled>运输中</el-button>
          <el-button
              v-if="scope.row.state==6"
              size="mini"
              type="success" disabled>已通知</el-button>
          <el-button
              v-if="scope.row.state==5"
              size="mini"
              type="success" disabled>待通知</el-button>
          <el-button
              v-if="scope.row.state==4"
              size="mini"
              type="danger" disabled>待运输</el-button>
          <el-button
              v-if="scope.row.state==7"
              size="mini"
              type="danger" disabled>已运输</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
              size="mini"
              v-if="scope.row.state==5"
              type="primary"
              @click="informButton(scope.row)" plain>通知</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "LogisticsView",
  data(){
    return{
      tableData:[]
    }
  },methods:{
    /*通知按钮*/
    informButton(row){
      alert(row)
      //alert(deiverId)
      //console.log("绑定的司机id==="+deiverId);
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/informDeiver",row).then(res=>{
        console.log(res.data)
        if(res.data=='success'){
          this.$message.success("通知成功！！！");
          this.logisticsList();
        }
        else{
          this.$message.error("通知失败！！！")
        }
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    /*物流列表*/
    logisticsList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/logisticsList").then(res=>{
        console.log(res.data)
        this.tableData=res.data;
      })
    }
  },created() {
    this.logisticsList();
  }
}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>